<template>
  <div class="view-container work-info-detail">
    <div class="info-container">
      <header class="header">
        <p class="title-1">测试</p>
        <div class="header-1">
          <ul>
            <li>用途: 测试 </li>
            <li>分类: 下传 </li>
            <li>文号: 测试 </li>
          </ul>
          <p>老王 发表于2020-10-20</p>
        </div>
      </header>
      <section>
        这问题是我提的，我很惊讶于为什么这么有价值的片子在国内社区却几乎没人讨论。在我看来，这明明才是真正值得「那些口口声声一代不如一代的人」看看的作品。我们的后浪里不只是有 B 站上烧钱的富二代 UP 主和快手上梦想每天挣 300 块的打工小哥，还有 G 站上做开源的开发者们在默默地搞「世界人民大团结万岁」呢！所谓 G 站，即程序员用的 GitHub Site，简称 GHS。像 Vue 就是世界顶级的 GHS 作品。这片子本身结构挺简单的。毕竟拍纪录片嘛，大致就是依次采访几个还在世的相关人士（咦）。下面带大家过一遍剧情：全片开始！哇新泽西大 house，大家入关后的梦想：

        作者：doodlewind
        链接：https://www.zhihu.com/question/398425577/answer/1257568131
        来源：知乎
        著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
      </section>
      <footer class="">
        <el-row>
          <el-col :span="6" class="read">
            <el-tag @click="isShowDialog = true">已读：15</el-tag>
            <el-tag type="danger" @click="isShowDialog = true">未读：20</el-tag>
          </el-col>
          <el-col :span="18" class="footer-right clearfix">
            <div class="item">
              <svg-icon icon-class="print1"></svg-icon>
              <span>打印</span>
            </div>

            <div class="item">
              <svg-icon icon-class="icon_star"></svg-icon>
              <span>收藏</span>
            </div>
            <div class="item">
              <svg-icon icon-class="icon_message"></svg-icon>
              <span>回复(0)</span>
            </div>
          </el-col>
        </el-row>
      </footer>
      <el-dialog
        title="查阅情况"
        :visible.sync="isShowDialog">
          <div class="btn">
            <el-button type="success">人员全选</el-button>
            <el-button type="danger">发起系统提醒</el-button>
          </div>
        <div class="table-container">
          <el-table :data="tableData" border stripe>
            <el-table-column label="部门" prop="bumen"></el-table-column>
            <el-table-column label="未阅" prop="ren" width="400">
              <template slot-scope="s">
                <el-checkbox
                  v-model="userList"
                  v-for="(item,index) in s.row.ren"
                  :key="index"
                >{{item}}</el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="已阅" prop="yue">
              <template slot-scope="s">
                <span
                  v-model="userList"
                  v-for="(item,index) in s.row.ren"
                  :key="index"
                >{{item}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'WorkInfoDetail',
    data() {
      return {
        isShowDialog:false,
        tableData:[
          {'bumen':'11',ren:[1,2,3],yue:[9,0,10]},
          {'bumen':'22',ren:[4,5],yue:[6,7]}
        ],
        userList:[]
      }
    },
    created() {

    },
    methods: {}
  }
</script>
<style lang="scss">
  .work-info-detail {
    .el-dialog__body {
      padding-bottom: 45px;
    }
  }
</style>

<style scoped lang="scss">
  $borderColor:1px solid #e0e0e0;

  .view-container {
    font-size: 14px;
    background-color: #F4F9FD;
    .info-container {
      background-color: white;
      margin: 0 200px;
      box-shadow: 0 1px 3px rgba(7, 7, 7, 0.15);
      border-radius: 3px;
    }
    header,section {
      border-bottom: $borderColor;
      padding: 20px 30px;
    }
    footer {
      padding: 20px 30px;
    }
  }

  .title-1 {
    text-align: center;
    margin-bottom: 10px;
  }
  .header-1 {
    display: flex;
    justify-content: space-between;
    color: #616161;
  }

  section {
    line-height: 1.8;
    min-height: 320px;
  }

  .header {
    font-size: 13px;
    ul{
      display: flex;
      li {
        margin-right: 20px;
      }
    }
  }
  footer {
    color: #606060;
    line-height: 30px;
    .footer-right {
      .item {
        float: right;
        margin-right: 20px;
        transition: color 0.5s;
        cursor: pointer;
      }
      .item:hover {
        color: #919191;
        text-decoration: underline;
      }
    }
    .read {
      .el-tag {
        margin-right: 10px;
        cursor: pointer;
        transition: all 0.3s;
      }
      .el-tag:first-of-type:hover {
        box-shadow: 1px 1px 15px rgba(210, 245, 255, 0.93);
      }
      .el-tag:last-of-type:hover {
        box-shadow: 1px 1px 15px rgba(255, 220, 230, 0.93);
      }
    }
  }

  .el-dialog {
    .btn {
      text-align: right;
      margin-bottom: 20px;
    }
  }

</style>
